<template>
  <view class="detail-container">
    <view class="header">
      <text class="title">产品详情</text>
    </view>

    <view class="detail-content">
      <view class="detail-item">
        <text class="detail-label">产品名称：</text>
        <text class="detail-value">{{ materialDetail.materialName }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">批次号：</text>
        <text class="detail-value">{{ materialDetail.lotNumber }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">方案合格率：</text>
        <text class="detail-value">{{ materialDetail.passRate }}%</text>
      </view>
	  <view class="detail-item">
	    <text class="detail-label">现成合格率：</text>
	    <text class="detail-value">{{ materialDetail.trueRate }}%</text>
	  </view>
      <view class="detail-item">
        <text class="detail-label">总检验数量：</text>
        <text class="detail-value">{{ materialDetail.quantity }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">最终合格数量：</text>
        <text class="detail-value">{{ materialDetail.passNum }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">缺陷描述：</text>
        <text class="detail-value">{{ materialDetail.defectsDescription }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">质检日期：</text>
        <text class="detail-value">{{ materialDetail.createdAt }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">备注：</text>
        <text class="detail-value">{{ materialDetail.notes }}</text>
      </view>
    </view>

    <view class="bottom-actions">
      <button class="back-button" @click="goBack">
        <icon type="back" size="20" color="#fff"></icon>
        返回
      </button>
      <button 
        v-if="!isChecked" 
        class="confirm-button" 
        @click="openPopup"
      >
        <icon type="checkmark" size="20" color="#fff"></icon>
        质检
      </button>
      <button 
        v-else 
        class="checked-button" 
        disabled
      >
        <icon type="checkmark" size="20" color="#666"></icon>
        已质检
      </button>
    </view>

    <!--  模拟弹窗 -->
    <view v-if="showPopup" class="popup-mask" @click="closePopup">
      <view class="popup-container" @click.stop>
        <view class="popup-header">
          <text class="popup-title">修改质检信息</text>
          <button class="close-button" @click="closePopup">
            <icon type="close" size="24" color="#999"></icon>
          </button>
        </view>
        
        <view class="popup-body">
          <view class="input-group">
            <text class="input-label">最终合格数量：</text>
            <input v-model="editData.passNum" type="number" class="popup-input" placeholder="请输入最终合格数量" />
          </view>

          <view class="input-group">
            <text class="input-label">缺陷描述：</text>
            <input v-model="editData.defectsDescription" type="text" class="popup-input" placeholder="请输入缺陷描述" />
          </view>

          <view class="input-group">
            <text class="input-label">质检日期：</text>
            <input v-model="editData.createdAt" type="date" class="popup-input" placeholder="请选择质检日期" />
          </view>

          <view class="input-group">
            <text class="input-label">备注：</text>
            <input v-model="editData.notes" type="text" class="popup-input" placeholder="请输入备注" />
          </view>
        </view>

        <view class="popup-footer">
          <button class="cancel-button" @click="closePopup">取消</button>
          <button class="confirm-button" @click="submitUpdate">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>



<script>
export default {
  data() {
    return {
      id: null,
      materialDetail: {},
      showPopup: false, //  控制弹窗显示
      isChecked: false, //  是否已质检
      editData: {
        passNum: 0,
        defectsDescription: "",
        createdAt: "",
        notes: ""
      }
    };
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.fetchDetail();
    } else {
      uni.showToast({ title: "参数错误", icon: "none" });
    }
  },
  methods: {
    /**  获取原料详情 */
    fetchDetail() {
      if (!this.id) {
        uni.showToast({ title: "ID 获取失败", icon: "none" });
        return;
      }
      uni.request({
        url: `http://127.0.0.1:1005/detail/${this.id}`,
        method: "GET",
        header: { "Content-Type": "application/json" },
        success: (res) => {
          if (res.data.code === 200) {
            this.materialDetail = res.data.data;
            this.isChecked = this.materialDetail.result === 0; //  如果已质检，修改按钮状态
            this.editData = { ...this.materialDetail };
          } else {
            uni.showToast({ title: res.data.msg || "加载失败", icon: "none" });
          }
        },
        fail: () => {
          uni.showToast({ title: "请求失败", icon: "none" });
        }
      });
    },

    /**  打开弹窗 */
    openPopup() {
      this.showPopup = true;
      // 初始化质检日期为当前日期
      this.editData.createdAt = this.getCurrentDate();
    },

    /**  关闭弹窗 */
    closePopup() {
      this.showPopup = false;
    },

    /**  提交修改 */
    submitUpdate() {
      // 更新质检日期为当前日期
      this.editData.createdAt = this.getCurrentDate();

      uni.request({
        url: `http://127.0.0.1:1005/detail/edit`,
        method: "PUT",
        header: { "Content-Type": "application/json" },
        data: this.editData,
        success: (response) => {
          if (response.data.code === 200) {
            uni.showToast({ title: "质检完成", icon: "success" });

            //  更新状态，修改按钮为 “已质检”
            this.isChecked = true;
            this.showPopup = false;
            this.materialDetail = { ...this.editData };
          } else {
            uni.showToast({ title: response.data.msg || "操作失败", icon: "none" });
          }
        },
        fail: () => {
          uni.showToast({ title: "请求失败", icon: "none" });
        }
      });
    },

    /** 返回上一级 */
    goBack() {
      uni.navigateBack();
    },

    /** 获取当前日期 */
    getCurrentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>



<style scoped>
.detail-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  padding: 20rpx 0;
  background-color: #ffffff;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  border-bottom: 1px solid #eaeaea;
}

.detail-content {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.detail-label {
  font-weight: bold;
  color: #555;
}

.detail-value {
  text-align: right;
}

.bottom-actions {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
}

.back-button {
  background-color: #ccc;
  padding: 10rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-button icon {
  margin-right: 10rpx;
}

.confirm-button {
  background-color: #007aff;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-button icon {
  margin-right: 10rpx;
}

.checked-button {
  background-color: #ccc;
  color: #666;
  padding: 10rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checked-button icon {
  margin-right: 10rpx;
}

/*  模拟弹窗 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-container {
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.popup-title {
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  padding: 0;
}

.close-button icon {
  font-size: 32rpx;
  color: #999;
}

.popup-body {
  margin-bottom: 20rpx;
}

.input-group {
  margin-bottom: 20rpx;
}

.input-label {
  font-size: 50rpx;
  color: #555;
  margin-bottom: 10rpx;
}

.popup-input {
  width: 100%;
  padding: 10rpx 15rpx;
  border: 1px solid #ccc;
  border-radius: 20rpx;
  font-size: 40rpx;
  box-sizing: 50rpx;
}

.popup-footer {
  display: flex;
  justify-content: flex-end;
}

.cancel-button {
  background-color: #ccc;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-right: 10rpx;
}

.confirm-button {
  background-color: #007aff;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}
</style>

